<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>表单验证</h2>
    <form action="">
      <ul v-validate.blur="bindData">
        <li>
          姓名：<input data-validate="测试" type="text" name="name1">
        </li>
        <li>
          年龄：<input data-validate="23" type="text" name="age">
        </li>
        <li>
          生日：<input data-validate="201" type="text" name="birthday">
        </li>
        <li>
          邮箱：<input type="text" name="email">
        </li>
      </ul>
    </form>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      bindData: {
        name: 'name1',
        style: 'sytle',
        mode: 'tip',
        regs: `required|email`,
      }
    }
  },
  created() {
    Vue.prototype.$validate = function (fromEntry) {}
  },
  mounted() {
    // function aaf() {
    //   let a = new Promise((resolve, reject) => {
    //     setTimeout(function(){
    //       resolve({
    //         a: 1, b:3
    //       }); // Yay! Everything went well!
    //     }, 250);
    //   });
    //   return a;
    // }

    // function bbf() {
    //   let b = new Promise((resolve, reject) => {
    //     setTimeout(function(){
    //       resolve("111"); // Yay! Everything went well!
    //     }, 150);
    //   });
    //   return b;
    // }

    // let isPromise = (obj) => {
    //   return !!obj && typeof obj.then === 'function';
    // }
    // // console.log(isPromise(b));
    // const options = this.$options;
    // console.log(this);
    // let arr = [aaf,bbf];
    // let cc = arr.map(v => {
    //   return v();
    // });
    // console.log(cc);
    // Promise.all(cc).then((res)=>{
    //   console.log(res);
    // });
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
